<ion-header>
    <ion-toolbar content-page>
        <ion-buttons start>
            <button ion-button icon-only navPop>
                <i class="toolbar-back"></i>
            </button>
        </ion-buttons>
        <ion-title>
            营销活动
        </ion-title>
        <ion-buttons end>
            <button ion-button icon-only adpmenutoggle>
                <i class="toolbar-menu"></i>
            </button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>


    <div class="switch-bar" ion-fixed>
        <div class="switch-btn webChat-left" [class.switch-btn_selected]="currentView === 0" (click)="changeCurrentView(0)">微信获客活动
        </div>
        <div class="switch-btn jiabao-left" [class.switch-btn_selected]="currentView === 1" (click)="changeCurrentView(1)">加保活动
        </div>
        <div class="switch-sign" [class.sign-change]="currentView === 1"></div>
    </div>

    <div class="fixed-bar" ion-fixed>
        <div class="roster-num" *ngIf="currentView === 0">
            <div class="select-warp" (click)="openWebChatSelect()">
                <span [ngClass]="currentGroupName=='请选择'?'chooseGroup':''">
                    {{webChatGroupName}}
                </span>
                <i></i>
            </div>
        </div>

        <div class="roster-num" *ngIf="currentView === 1">
            <div class="select-warp" (click)="openJiaBaoSelect()">
                <span [ngClass]="currentGroupName=='请选择'?'chooseGroup':''">
                    {{jiaBaoGroupName}}
                </span>
                <i></i>
            </div>
        </div>
        <div class="filter-btn" (click)="toFilterPage()">
            <i class="filter"></i>筛选
        </div>
    </div>
    <div class="title-bar-webchat row" ion-fixed *ngIf="currentView === 0">
        <div class="col noCol">活动</div>
        <div class="col noCol">已参与</div>
        <div class="col noCol">未参与</div>
        <div class="col noCol">获客<br>总数</div>
        <div class="col noCol">新客<br>户数</div>
    </div>
    <ion-refresher (ionRefresh)="doRefresh($event)" [pullMax]="800">
        <ion-refresher-content></ion-refresher-content>
    </ion-refresher>
    <div class="card-list" *ngIf="currentView === 0">
        <div *ngIf="webChatActivityList.length === 0" class="no-data">
            <div class="no-data-img"><img src="./assets/images/common/icon_nodata.png"></div>
            <div class="no-data-txt">没有相关数据</div>
        </div>
        <div class="card row"
             *ngFor="let item of webChatActivityList;  index as innerIndex">
            <div class="col card-bd" (click)="goWebChatActivityDetail(item)">
                <div class="row">
                    <div class="col name" [ngClass]="item.isShowDetail==false?'':'selected-row-color'"
                         [innerHTML]="item.shortName"></div>
                    <div class="col hasActive" [innerHTML]="item.join"></div>
                    <div class="col noActive" [innerHTML]="item.notJoin"></div>
                    <div class="col allNums" [innerHTML]="item.getCustomerNum"></div>
                    <div class="col newActive" [innerHTML]="item.newCustomerNum"></div>
                </div>
            </div>
        </div>

    </div>

    <div class="title-bar-jiabao row" ion-fixed *ngIf="currentView === 1">
        <div class="col noCol">活动</div>
        <div class="col noCol">目标营<br>销员数</div>
        <div class="col noCol">目标<br>客户数</div>
        <div class="col noCol">联系<br>客户数</div>
        <div class="col noCol">客户<br>跟进率</div>
    </div>
    <div class="card-list-jiabo" *ngIf="currentView === 1">
        <div *ngIf="jiaBaoActivityList.length === 0" class="no-data">
            <div class="no-data-img"><img src="./assets/images/common/icon_nodata.png"></div>
            <div class="no-data-txt">没有相关数据</div>
        </div>
        <div class="card row"
             *ngFor="let item of jiaBaoActivityList;  index as innerIndex">
            <div class="col card-bd" (click)="goJiabaoActivityDetail(item)">
                <div class="row">
                    <div class="col name" [ngClass]="item.isShowDetail==false?'':'selected-row-color'"
                         [innerHTML]="item.shortName"></div>
                    <div class="col hasActive" [innerHTML]="item.targetAgent"></div>
                    <div class="col noActive" [innerHTML]="item.targetCustomerNum"></div>
                    <div class="col allNums" [innerHTML]="item.contactVCustomerNum"></div>
                    <div class="col newActive" [innerHTML]="item.percentContact"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom-warp"></div>
    <ion-fab bottom right class="go-up">
        <button ion-fab (click)="goUp()" color="light">
            <img class="go-up-icon" src="./assets/images/client/client-list/icon_top.png" alt="">
        </button>
    </ion-fab>
</ion-content>
<ion-footer>
    <div *ngIf="currentView === 0" class="title-bar-webchat-total row">
        <div class="col">合计</div>
        <div class="col" [innerHTML]="webChatTotal.join"></div>
        <div class="col" [innerHTML]="webChatTotal.notJoin"></div>
        <div class="col" [innerHTML]="webChatTotal.getCustomerNum"></div>
        <div class="col" [innerHTML]="webChatTotal.newCustomerNum"></div>
    </div>

    <div *ngIf="currentView === 1" class="title-bar-jiabao-total row">
        <div class="col">合计</div>
        <div class="col" [innerHTML]="jiaBaoTotal.targetAgent"></div>
        <div class="col" [innerHTML]="jiaBaoTotal.targetCustomerNum"></div>
        <div class="col" [innerHTML]="jiaBaoTotal.contactVCustomerNum"></div>
        <div class="col" [innerHTML]="jiaBaoTotal.percentContact">%</div>
    </div>
</ion-footer>
